<template>
  <div class="kgh-container">
    <div class="section">
      <div class="container">
        <div class="row">
          <template v-if="ftype==1||ftype==3">
            <div class="row section-header">
              <div class="col-xs-12">
                <h3>课程</h3>
              </div>
            </div>
            <div class="row">
              <div class="col-xs-12 col-sm-3" v-for="item in curriculumList" :key="item.id">
                <Course-item :item="item"></Course-item>
              </div>
            </div>
          </template>
          <template v-if="ftype==2">
            <div class="row section-header">
              <div class="col-xs-12">
                <h3>资源</h3>
              </div>
            </div>
            <div class="col-xs-12">
              <table class="table">
                <tr v-for="item in fileList" :key="item.id">
                  <td>{{item.fileName}}</td>
                  <td>{{timestampToTime(item.createTime)}}</td>
                  <td>{{item.userName}}</td>
                  <td>{{dealFileLength(item.fileLength)}}</td>
                  <td width="200">
                    <a href="javascript:;" class="text-primary" @click="handleDownload(item.id)">点击下载</a>
                  </td>
                </tr>
              </table>
            </div>
          </template>
          <template v-if="ftype==4">
            <div class="row section-header">
              <div class="col-xs-12">
                <h3>专家</h3>
              </div>
            </div>
            <div class="row">
              <div class="col-xs-12 col-sm-3" v-for="item in techList" :key="item.id">
                <expertItem :item="item"></expertItem>
              </div>
            </div>
          </template>
        </div>
        <div class="row text-center load-more" v-if="loadShow">
          <a href="javascript:;" @click="fetchMoreData()">加载更多</a>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import axios from 'axios'
import qs from 'qs'
import util from '@/assets/js/utils.js'
// @ is an alias to /src
import CourseItem from '@/components/Course-Item.vue'
import expertItem from '@/components/Expert-Item.vue'
export default {
  name: 'course',
  data () {
    return {
      ftype: 1, //1 专家的课程 2 专家的资源 3 收藏的课程 4 收藏的专家
      uid: '',
      curriculumList: [],
      fileList: [],
      techList: [],
      loadShow: true,
      pageNum: -1
    }
  },
  components: {
    CourseItem,
    expertItem
  },
  created () {
    this.uid = this.$route.params.uid
    this.ftype = this.$route.params.ftype
    this.fetchMoreData()
  },
  methods: {
    fetchCurriculumList () {
      let that = this
      axios
        .post(
          '/curriculum/list',
          qs.stringify({
            ctype: '',
            category: '',
            hot: 0,
            name: '',
            from: this.pageNum,
            userId: that.uid
          })
        )
        .then(function (response) {
          if (response.data.suc == 200) {
            if (response.data.data.length <= 0) that.loadShow = false
            that.curriculumList = response.data.data.concat(response.data.data)
          } else if (response.data.errCode == 'ERROR_CODE_000000') {
            util.loginOver.call(that)
          }
        })
        .catch(function (error) {
          console.log(error)
        })
    },
    fetchFileList () {
      //资源
      let that = this
      axios
        .post(
          '/curriculum/shareFileList',
          qs.stringify({
            userId: that.uid,
            from: this.pageNum
          })
        )
        .then(function (response) {
          if (response.data.suc == 200) {
            if (response.data.data.length <= 0) that.loadShow = false
            that.fileList = that.fileList.concat(response.data.data)
          } else if (response.data.errCode == 'ERROR_CODE_000000') {
            util.loginOver.call(that)
          }
        })
        .catch(function (error) {
          console.log(error)
        })
    },
    fetchCurriculumList1 () {
      //课程列表（收藏）
      let that = this
      axios
        .post(
          '/curriculum/collectionList',
          qs.stringify({
            type: 1,
            from: that.pageNum
          })
        )
        .then(function (response) {
          if (response.data.suc == 200) {
            if (response.data.data.length <= 0) that.loadShow = false
            that.curriculumList = that.curriculumList.concat(response.data.data)
          } else if (response.data.errCode == 'ERROR_CODE_000000') {
            util.loginOver.call(that)
          }
        })
        .catch(function (error) {
          console.log(error)
        })
    },
    fetchTechList () {
      //专家列表（收藏）
      let that = this
      axios
        .post(
          '/curriculum/collectionList',
          qs.stringify({
            type: 2,
            from: that.pageNum
          })
        )
        .then(function (response) {
          if (response.data.suc == 200) {
            if (response.data.data.length <= 0) that.loadShow = false
            that.techList = that.techList.concat(response.data.data)
          } else if (response.data.errCode == 'ERROR_CODE_000000') {
            util.loginOver.call(that)
          }
        })
        .catch(function (error) {
          console.log(error)
        })
    },
    fetchMoreData () {
      // 加载更多
      this.pageNum += 1
      let type = this.ftype
      if (type == 1) this.fetchCurriculumList()
      else if (type == 2) this.fetchFileList()
      else if (type == 3) this.fetchCurriculumList1()
      else if (type == 4) this.fetchTechList()
    },
    handleDownload (id) {
      let that = this
      axios
        .post(
          '/curriculum/downloadShare',
          qs.stringify({
            id: id
          })
        )
        .then(function (response) {
          if (response.data.suc == 200) {
            window.open(response.data.data)
          } else if (response.data.errCode == 'ERROR_CODE_000000') {
            util.loginOver.call(that)
          }
        })
        .catch(function (error) {
          console.log(error)
        })
    },
    timestampToTime (time) {
      return util.timestampToTime(time)
    },
    dealFileLength (num) {
      if (num > 1048576) {
        return (num / 1048576).toFixed(1) + 'G'
      } else {
        return Math.ceil(num / 1024) + 'M'
      }
    }
  }
}
</script>